<template>
  <el-container>
    <el-aside width="220px">
      <div class="avatat">
        <el-avatar :size="80" :src="require('../assets/img/avatar.jpg')"></el-avatar>
        <div class="name">
          <span>Hi, Jackson !</span>
        </div>
      </div>
      <el-menu :default-active="defaultnum+''">
        <el-menu-item
          v-for="item in asideList"
          :key="item.id"
          :index="item.id+''"
          @click="gopath(item)"
        >
          <div class="title_icon">
            <div class="icon">
              <i :class="item.icon"></i>
            </div>
            <div class="title">
              <div>{{item.zh_title}}</div>

              <div class="title_en">{{item.en_title}}</div>
            </div>
          </div>
        </el-menu-item>
      </el-menu>
      <div class="quit">
        <div class="quit_inner">
          <el-tooltip class="item" effect="dark" content="点击退出系统" placement="right-start">
            <div class="quit_btn" @click="logout">
              <i class="icon-6"></i>
              <div>
                <p>退出</p>
                <p class="quit_btn_en">Log Out</p>
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <div>{{currentItem.zh_title}}</div>
        <div class="en_header">{{currentItem.en_title}}</div>
      </el-header>
      <el-main>
        <router-view></router-view>
        <div class="footer">
          <el-row>
            <el-col align="center" :span="1">
              <i class="el-icon-headset"></i>
            </el-col>
            <el-col :span="22">
              如果您遇到任何问题请致电旅行服务台，电话：021-962990
              <br />If you have any questions please consult the TravelDesk in work time, tel:021-962990
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      defaultnum: 1,
      currentItem: {
        zh_title: "国内航班",
        en_title: "Domestic Air",
      },
      asideList: [
        {
          id: 1,
          zh_title: "国内航班",
          en_title: "Domestic Flight",
          icon: "icon--1",
          path: "/demoestic",
        },
        {
          id: 2,
          zh_title: "国际航班",
          en_title: "International Air",
          icon: "icon--11",
          path: "/international",
        },
        {
          id: 3,
          zh_title: "酒店住宿",
          en_title: "Hotel",
          icon: "icon--5",
          path: "/hotel",
        },
        {
          id: 4,
          zh_title: "火车",
          en_title: "Train",
          icon: "icon--2",
          path: "/train",
        },
        {
          id: 5,
          zh_title: "差旅申请单",
          en_title: "Travel Request",
          icon: "icon--10",
          path: "/request",
        },
        {
          id: 6,
          zh_title: "审批列表",
          en_title: "Approval",
          icon: "icon--6",
          path: "/demostic",
        },
      ],
    };
  },
  created() {
    const item = sessionStorage.getItem("item");
    if (item) {
      const parseItem = JSON.parse(item);
      this.getNowItem(parseItem);
    }
  },
  methods: {
    getNowItem(item) {
      this.defaultnum = item.id;
      this.currentItem.zh_title = item.zh_title;
      this.currentItem.en_title = item.en_title;
    },
    // 退出系统
    logout() {
      sessionStorage.clear(); 
      this.$router.push("/login");
    },
    gopath(item) {
      sessionStorage.setItem("item", JSON.stringify(item));
      this.getNowItem(item);
      this.$router.push(item.path);
    },
    ...mapMutations(["changedrawer"]),
    // 前往购物车界面
  },
};
</script>

<style lang="less" scope>
.el-container {
  height: 100%;
}

.el-header {
  height: 72px;
  background-color: #fff;
  color: #333;
  box-shadow: 0px -13px 37px #a9c7e8;
  z-index: 1;
  font-size: 22px;
  font-weight: 400;
  color: rgba(81, 81, 81, 1);
  line-height: 30px;
  padding: 4px 30px !important;
  .en_header {
    font-size: 14px;
    line-height: 20px;
  }
}
.el-menu-item [class^="el-icon-"] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 30px !important;
  vertical-align: middle;
}
.el-menu-item i {
  color: #fff !important;
}

.el-aside {
  background-color: var(--themeColor);
  color: #333;
  text-align: center;
  z-index: 99;
  .avatat {
    width: 100%;
    padding: 80px 0;
    color: #fff;
  }
  .el-menu {
    width: 200px;
    margin-left: 20px;
    border: none;
    background-color: var(--themeColor);
    .el-menu-item {
      color: #fff;
      height: 80px;
      line-height: 80px;
      border-radius: 40px 0 0 40px;

      .title_icon {
        display: flex;
        .icon {
          width: 30%;
          align-items: center;
          font-size: 30px;
        }

        .title {
          margin-top: 20px;
          font-size: 20px;
          width: 70%;
          line-height: 20px;
          .title_en {
            font-size: 12px;
          }
        }
      }
    }
    .el-menu-item.is-active {
      background-color: #f5f5f5;
      color: var(--themeColor);
    }
    .el-menu-item.is-active i {
      color: var(--themeColor) !important;
    }
    .is-active:before {
      content: " ";
      color: transparent;
      width: 35px;
      height: 35px;
      position: absolute;
      bottom: -35px;
      right: 0;
      display: block;
      background-image: radial-gradient(
        200px at bottom left,
        transparent 34px,
        #f5f5f5 35px
      );
    }
    .is-active:after {
      content: " ";
      color: transparent;
      width: 35px;
      height: 35px;
      position: absolute;
      display: block;
      top: -35px;
      right: 0;
      background-image: radial-gradient(
        200px at 0px 0px,
        transparent 34px,
        #f5f5f5 35px
      );
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      outline: 0;
      background-color: #f5f5f5 !important;
      color: #11539c;
    }
  }
  .quit {
    width: 180px;
    height: 180px;
    position: fixed;
    bottom: -53px;
    left: 20px;
    border-radius: 50%;
    background-color: rgba(17, 92, 156, 0.9);

    overflow: hidden;
    .quit_inner {
      margin: 15px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: rgba(17, 99, 156, 0.9);
      overflow: hidden;
      .quit_btn {
        margin: 15px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: rgba(17, 103, 156, 0.9);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        .icon-6 {
          margin-right: 5px;
        }
        .quit_btn_en {
          font-size: 12px;
        }
      }
    }
  }
}

.el-main {
  background-color: #f5f5f5;
  color: #333;
}
</style>